import Taro from '@tarojs/taro'
import { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Image, Text } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import CTopbar from '../../components/CTopbar/index'
import './index.scss'
import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import { get_query_data } from './service'
import { toggle_lick_api } from '../Home/HomeCardDetails/service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
/**
 * 搜索结果页
 */
class QueryResult extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      type: '',
      query_data: [],
      currentPage: 1, //当前页
      pageSize: 10, //数量
      toatal: 0, //总数
    }
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    const { type } = Current.router?.params
    this.setState(
      {
        type,
      },
      () => {
        this.search_event()
      },
    )
  }

  search_event() {
    const { currentPage, pageSize, type, value } = this.state

    get_query_data(value, currentPage, pageSize, type).then(({ result, data }) => {
      this.setState({
        query_data: data,
      })
    })
  }

  toDetails(id) {
    const { type } = this.state
    if (type) {
      Taro.navigateTo({ url: '/pages/Home/HomeCardDetails/index?id=' + id })
    } else {
      Taro.navigateTo({ url: '/pages/College/CourseDetails/index?id=' + id })
    }
  }
  onChange(value) {
    this.setState({
      value,
    })
  }
  onActionClick() {
    this.search_event()
  }
  toggleLike(id, e) {
    const { type } = this.state
    let t = 1 //t:类型 1测试 2课程
    if (type) {
      t = 1
    } else {
      t = 2
    }
    toggle_lick_api(id, t).then(({ result, data }) => {
      this.search_event()
    })
  }
  clearChange() {
    this.setState(
      {
        value: '',
      },
      () => {
        this.search_event()
      },
    )
  }
  render() {
    const { value, query_data } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='搜索' showBack></CTopbar>
        </View>
        <View className='content'>
          <View>
            <AtSearchBar
              actionName='搜索'
              placeholder='请输入测试名称或关键字'
              value={value}
              onChange={this.onChange.bind(this)}
              onActionClick={this.onActionClick.bind(this)}
              onClear={this.clearChange.bind(this)}
            />
          </View>

          <View className='list'>
            {query_data !== [] && query_data.length > 0 ? (
              query_data.map((c, i) => {
                return (
                  <View className='item'>
                    <View className='i-l' onClick={this.toDetails.bind(this, c.questionId || c.courseId)}>
                      <Image src={c.questionImg || c.courseImg} />
                    </View>
                    <View className='i-r'>
                      <View className='title'>{c.questionName || c.courseName}</View>
                      <View className='subtitle'>{c.questionSubtitle || c.courseSubtitle}</View>
                      <View className='testNum'>{c.testNumber || c.watchNumber || 0}人已测</View>
                      <View className='bottom_flex'>
                        <View className='price'>{c.price ? '￥' + c.price : '免费'}</View>
                        <View className='like' onClick={this.toggleLike.bind(this, c.questionId || c.courseId)}>
                          {c.isCollect ? <Image src={like} /> : <Image src={dislike} />}
                          {/* <Image src={dislike} />  */}
                          {c.isCollect ? <Text>已收藏</Text> : <Text>收藏</Text>}
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })
            ) : (
              <View className='not_found'>暂无数据</View>
            )}
          </View>
        </View>
      </View>
    )
  }
}

export default QueryResult
